<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>050-路由-传递参数.html</title>
</head>
<body>
	<div id="app">
		<nav>
			<router-link to="/home">Home</router-link>
			<router-link to="/acticles/123">Acticles</router-link>
			<router-link to="about">About</router-link>
		</nav>
		<div>
			<router-view></router-view>
		</div>
	</div>
	<template id="home">
		<div>home page</div>
	</template>
	<template id="acticles">
		<div>home page:{{$route.params.id}}</div>
	</template>
	<template id="about">
		<div>about page</div>
	</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
	//1.定义路由组件
	var Home = Vue.extend({
		template:'#home'
	})
	var Acticles = Vue.extend({
		template:'#acticles'
	})
	var About = Vue.extend({
		template:'#about'
	})

	//2.定义路由
	var routes = [
		{ path:'/home',component:Home},
		{ path:'/acticles/:id',component:Acticles},
		{ path:'/about',component:About},
		{ path:'/',redirect:'/home'},
	]
	//3.创建router实例，然后传router配置
	var router = new VueRouter({
		routes:routes
	})
	var vm = new Vue({
		el: '#app',
		router:router,
		data:{
		},
	})
</script>
</html>